<!--用户登录-->
<template>
<div style="height: 100vh;overflow:hidden;background-image:linear-gradient(135deg,#1352f2,#3c82f5);">
  <el-row style="height: 100px; align-items: center;">
    <el-col :span="24" style="text-align: center;">
      <span style="color: #fff; font-size: 30px; font-weight: bold;">XX商城运营管理平台</span>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="8"></el-col>
    <el-col :span="8">
      <el-card style="margin-top: 80px;">
        <h3 style="text-align: center">用户登录</h3>
        <el-form label-position="top">
          <el-form-item label="用户名">
            <el-input placeholder="请输入用户名" v-model="userLoginForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input placeholder="请输入密码" show-password v-model="userLoginForm.password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 100%;" @click="userLogin">登录</el-button>
          </el-form-item>
          <el-form-item>
            <el-link type="primary" @click="beforeAddUser">立即注册</el-link>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
    <el-col :span="8"></el-col>
  </el-row>

</div>
  <el-dialog :title="dialogTitle" style="width: 1000px;padding:40px;" v-model="dialogVisible" :before-close="handleClose">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="用户名">
            <el-input placeholder="请输入用户名"
                      v-model="saveUserForm.username"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="昵称">
            <el-input placeholder="请输入昵称" v-model="saveUserForm.nickname"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="密码">
            <el-input placeholder="请输入密码" v-model="saveUserForm.password"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱">
            <el-input placeholder="请输入邮箱" v-model="saveUserForm.email"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="手机号">
            <el-input placeholder="请输入手机号"
                      v-model="saveUserForm.phone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="地址">
            <el-input placeholder="请输入地址" v-model="saveUserForm.address"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveUser">保存</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import axios from "axios";
import {ref} from "vue";
import {ElMessage} from "element-plus";
import router from "@/router";

// 表单数据
const userLoginForm = ref({
  username: '',
  password: ''
});
//定义变量用来控制弹窗是否出现
const dialogVisible = ref(false);

//定义对象用来保存新增用户表单中收集的数据
const saveUserForm = ref({
  username:'',
  phone:'',
  email:'',
  nickname:'',
  address:'',
  password:'',
});
// 登录
const userLogin = () => {
  axios.post(BASE_URL+'/v1/user/login',userLoginForm.value)
      .then((response)=>{
        console.log(userLoginForm.value);
        if(response.data.state == 2002){
          ElMessage.success('登录成功!');
          localStorage.setItem('userLoginForm',JSON.stringify(response.data.data));
          console.log(response.data.data);
          router.push('/')
        }else{
          ElMessage.error(response.data.message);
          userLoginForm.value = {username:'',password:''};
        }
      })

};

//点击立即注册时调用的方法
const beforeAddUser = ()=>{
  dialogVisible.value = true;
}

const saveUser = ()=>{
  if(!saveUserForm.value. username|| saveUserForm.value.username.trim()==''){
    ElMessage.error('请输入用户名!');
    return;
  }
  if(!saveUserForm.value.password || saveUserForm .value.password.trim()==''){
    ElMessage.error('请输入密码!');
    return;
  }
  console.log(saveUserForm.value);
  axios.post(BASE_URL+'/v1/user/save',saveUserForm.value)
      .then((response)=>{
        if(response.data.state == 2002){
          ElMessage.success('保存成功!');
          dialogVisible.value = false;
          saveUserForm.value = {};
        }else{
          ElMessage.error(response.data.message);
        }
      })
}
//定义处理关闭弹窗的方法
const handleClose = ()=>{
  if(confirm('您确认要关闭本弹窗吗?')){
    saveUserForm.value = {};
    dialogVisible.value = false;
  }
}
</script>


<style scoped>

</style>